import styles from './index.module.css';

function createSpan(content, newPage, onPageChange) {
  return (
    <span key={newPage+content} onClick={() => onPageChange && onPageChange(newPage)}>
      {content}
    </span>
  );
}

export default ({ page = 1, limit = 10, total = 0, onPageChange }) => {
  if (total === 0) {
    return null;
  }

  const pageNum = Math.ceil(total / limit);
  const pages = [];
  pages.push()
  for (let i = 1; i <= pageNum; i++) {
    pages.push(createSpan(i, i, onPageChange));
  }

  return (
    <div className={styles.pager}>
      {page > 1 && createSpan('首页', 1, onPageChange)}
      {page > 1 && createSpan('上一页', page - 1, onPageChange)}
      {pages}
      {page < pageNum && createSpan('下一页', page + 1, onPageChange)}
      {page < pageNum && createSpan('尾页', pageNum, onPageChange)}
    </div>
  );
};
